<script setup lang="tsx">
import { reactive } from 'vue'
const table = reactive({
  loading: false,
  records: [
    {
      name: '中国电信',
      address: 'sss',
      email: '',
      desc: ''
    }
  ]
})

const ruleTable = reactive({
  selections: [],
  columns: [
    { label: '机构名称', prop: 'name' },
    { label: '机构地址', prop: 'address' },
    { label: '邮箱', prop: 'email' },
    { label: '描述', prop: 'desc' },
    {
      label: '操作',
      width: 200,
      render: ({ row }) => (
        <div>
          <span
            class="click"
            onClick={() => {
              openDetail(row)
            }}
          >
            详情
          </span>
        </div>
      )
    }
  ]
})

const page = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 1
})

// 详情
const openDetail = (row) => {
  console.log(row)
}
</script>
<template>
  <!-- 机构列表 -->
  <jmp-table
    :data="table.records"
    :columns="ruleTable.columns"
    :loading="table.loading"
    @selection-change="ruleTable.selections = $event"
  />
  <!-- 分页 -->
  <jmp-pagination
    v-model:page="page.pageNum"
    v-model:limit="page.pageSize"
    v-model:total="page.total"
  />
</template>
<style scoped lang="scss"></style>
